<template>
  <div id="background">
    <el-container>
      <el-header style="height:200px">
        <div>
          <el-row type="flex" style="margin-top:40px">
            <el-col :xs="3" :sm="3" :md="3" :offset="2">
              <img v-bind:src="backIcon" style="height:28px" @click="back" />
            </el-col>
          </el-row>
          <el-row type="flex" justify="center" style="margin-bottom:30px">
            <el-col :xs="20" :sm="20" :md="20" class="imgCol">
              <img v-bind:src="titleImg" style="height:40px" />
            </el-col>
          </el-row>
          <el-row type="flex" class="stepBottom" justify="center">
            <el-col :xs="22" class="imgCol">
              <img v-bind:src="step2Img" style="height:25px" />
            </el-col>
          </el-row>
        </div>
      </el-header>
      <el-main>
        <div id="inputHeight">
          <!-- <el-row type="flex" style="margin-bottom:60px">
            <el-col :xs="2" :sm="2" :md="2" :offset="2" class="imgCol">
              <img v-bind:src="codeIcon" style="height:20px" />
            </el-col>
            <el-col :xs="17" :sm="17" :md="17">
              <el-input
                class="registInput"
                id="registInput2"
                v-model="loginForm.password"
                placeholder="请为账号设置密码"
                show-password
                clearable
              ></el-input>
            </el-col>
          </el-row>-->
          <el-form :model="loginForm" :rules="rules" ref="loginForm">
            <el-form-item prop="password">
              <el-row type="flex" style="margin-bottom:60px">
                <el-col :xs="2" :sm="2" :md="2" :offset="2" class="imgCol">
                  <img v-bind:src="codeIcon" style="height:20px" />
                </el-col>
                <el-col :xs="17" :sm="17" :md="17">
                  <el-input
                    class="registInput"
                    id="registInput2"
                    v-model="loginForm.password"
                    placeholder="请为账号设置密码"
                    show-password
                    clearable
                  ></el-input>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-row type="flex" justify="center" style="margin-bottom:10px">
            <el-col :xs="20" :sm="20" :md="20">
              <button class="btn" @click="regist">
                <p class="btnWords">确定</p>
              </button>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import backIcon from "../../assets/img/regist/back.png";
import titleImg from "../../assets/img/regist/title.png";
import step2Img from "../../assets/img/regist/2.png";
import codeIcon from "../../assets/icon/login/code.png";
import { Toast } from "vant";
export default {
  data() {
    var validatePassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error("密码不能为空"));
      } else if (value.length <= 6) {
        callback(new Error("密码不能小于6位"));
      } else {
        callback();
      }
    };
    return {
      backIcon: backIcon,
      titleImg: titleImg,
      step2Img: step2Img,
      codeIcon: codeIcon,
      // normalHeight:document.documentElement. clientHeight,
      loginForm: {
        phone: "",
        checkCode: "",
        password: ""
      },
      rules: {
        password: [{ validator: validatePassword, trigger: "blur" }]
      },
      //实时屏幕高度
      showHeight: document.documentElement.clientHeight,
      height: document.documentElement.clientHeight
    };
  },
  watch: {},
  mounted() {
    var normalHeight = sessionStorage.getItem("normalHeight");

    var bg = document.getElementById("background");
    // normalHeight=document.documentElement.clientHeight;
    console.log("height:" + normalHeight);
    bg.style.height = normalHeight + "px";
    bg.style.backgroundColor = "#FFFFFF";
    bg.style.margin = "0px";

    this.loginForm = this.$route.query.loginForm;
    console.log("进入step2:", this.loginForm);
  },
  methods: {
    back() {
      console.log("back:");
      this.$router.go(-1);
    },
    //注册
    regist() {
      this.$refs["loginForm"].validate(valid => {
        if (valid) {
          var URL = this.IP.IP + "/user/registerByPhone";
          console.log(URL);
          console.log(this.loginForm.phone);
          console.log(this.loginForm.checkCode);
          console.log(this.loginForm.code);
          this.$ajax({
            method: "post",
            url: URL,
            data: this.loginForm
          })
            .then(response => {
              console.log(response.data);
              var code = response.data.code;
              if (code == 0) {
                Toast(response.data.data);
                this.$router.push({
                  path: "/login"
                });
              } else {
                Toast(response.data.msg);
              }
            })
            .catch(error => {
              console.log(error);
              //Toast(error);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style>
.el-header,
el-main,
el-footer,
el-aside {
  padding: 0px;
  margin: 0px;
}
.imgCol {
  display: flex;
  align-items: center;
  justify-content: center;
}
.registInput .el-input__inner {
  font-size: 1.125em;
  border: none;
  border-bottom: 1px solid;
  border-color: #f0f0f0;
  background-color: rgba(255, 255, 255, 0);
  color: #707070;
  border-radius: 0px;
}
.btn {
  line-height: 0.75em;
  width: 100%;
  background-color: #53cdf5;
  border-style: none;
  outline: none;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
}
.btnWords {
  font-size: 1.125em;
  color: #ffffff;
}
#inputHeight {
  height: 200px;
}
@media screen and (max-height: 600px) {
  #inputHeight {
    height: 160px;
  }
}
</style>
